<template>
	<view class="complaints-container">
		<!-- 头部区域 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content" @click="closePage()">
					<view class="header-left">
						<view class="back-btn">
							<text class="back-icon">←</text>
						</view>
					</view>
					<view class="header-center">
						<text class="page-title">投诉建议</text>
					</view>
					<view class="header-right">
						<view class="header-actions">
							<text class="action-text">反馈</text>
						</view>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 工单类型选择 -->
			<view class="form-card">
				<view class="card-header">
					<text class="card-title">工单类型</text>
					<text class="card-subtitle">请选择反馈类型</text>
				</view>
				<view class="type-selector">
					<picker :value="typeIndex" :range="rangeType" range-key="text" @change="onTypeChange"
						class="custom-picker">
						<view class="picker-content">
							<text class="picker-text">{{formData.type || '请选择工单类型'}}</text>
							<text class="picker-arrow">▼</text>
						</view>
					</picker>
				</view>
			</view>

			<!-- 详情描述 -->
			<view class="form-card">
				<view class="card-header">
					<text class="card-title">详情描述</text>
					<text class="card-subtitle">请详细描述您的问题或建议</text>
				</view>
				<view class="content-input">
					<textarea v-model="formData.content" placeholder="请输入您的想法，我们会认真处理您的反馈..." maxlength="500"
						class="custom-textarea" auto-height></textarea>
					<view class="char-count">
						<text class="count-text">{{formData.content.length}}/500</text>
					</view>
				</view>
			</view>

			<!-- 图片上传 -->
			<view class="form-card">
				<view class="card-header">
					<text class="card-title">相关图片</text>
					<text class="card-subtitle">上传相关图片（最多6张）</text>
				</view>
				<view class="image-upload">
					<view class="upload-container">
						<view class="upload-item" v-for="(image, index) in formData.images" :key="index">
							<image :src="image.url" class="uploaded-image" mode="aspectFill"></image>
							<view class="delete-btn" @click="deleteImage(index)">
								<text class="delete-icon">×</text>
							</view>
						</view>
						<view class="upload-btn" @click="chooseImage" v-if="formData.images.length < 6">
							<text class="upload-icon">+</text>
							<text class="upload-text">添加图片</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 联系信息 -->
			<view class="form-card">
				<view class="card-header">
					<text class="card-title">联系信息</text>
					<text class="card-subtitle">我们将通过以下方式联系您</text>
				</view>
				<view class="contact-info">
					<view class="info-item">
						<text class="info-label">联系人</text>
						<text class="info-value">{{userInfo.nickname || '未设置'}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">联系电话</text>
						<text class="info-value">{{userInfo.phone || '未设置'}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">所在小区</text>
						<text class="info-value">{{(userInfo.community && userInfo.community.name) || '未选择'}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作区域 -->
		<view class="bottom-actions">
			<view class="action-buttons">
				<button class="history-btn" @click="goPage">
					<text class="btn-text">历史记录</text>
				</button>
				<button class="submit-btn" @click="submit">
					<text class="btn-text">提交反馈</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import storage from "@/utils/storage.js";
	import config from '@/config/config';
	import {
		appeal
	} from "@/api/mine.js"

	export default {
		components: {
			headerSlot,
		},
		data() {
			return {
				config,
				formData: {
					type: '',
					images: [],
					content: '',
					contactName: '',
					contactPhone: '',
					communityId: '',
				},
				userInfo: {},
				typeIndex: 0,
				rangeType: [{
						value: '投诉',
						text: '投诉',
					},
					{
						value: '建议',
						text: '建议',
					},
					{
						value: '申述',
						text: '申述',
					},
					{
						value: '其他',
						text: '其他',
					},
				],
			};
		},
		onLoad() {
			this.userInfo = storage.getUserInfo()
		},
		methods: {
			closePage() {
				uni.navigateBack()
			},
			goPage() {
				this.$router.smartNavigate({
					url: '/pages/mePages/WorkOrderDetails'
				})
			},
			onTypeChange(e) {
				const index = e.detail.value;
				this.typeIndex = index;
				this.formData.type = this.rangeType[index].value;
			},
			chooseImage() {
				uni.chooseImage({
					count: 6 - this.formData.images.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.uploadImages(res);
					}
				});
			},
			deleteImage(index) {
				this.formData.images.splice(index, 1);
			},
			submit() {
				// 表单验证
				if (!this.formData.type) {
					uni.showToast({
						title: "请选择工单类型",
						icon: "error",
					});
					return
				}

				if (!this.formData.content || this.formData.content.trim() === '') {
					uni.showToast({
						title: "请填写详情描述",
						icon: "error",
					});
					return
				}

				if (this.formData.content.length < 10) {
					uni.showToast({
						title: "描述内容至少10个字符",
						icon: "error",
					});
					return
				}

				// 设置用户信息
				this.formData.contactName = this.userInfo.nickname
				this.formData.communityId = this.userInfo.community._id
				this.formData.contactPhone = this.userInfo.phone

				uni.showLoading({
					title: '提交中...',
					mask: true
				})

				appeal(this.formData).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "提交成功",
						icon: "success",
					});

					// 重置表单
					this.formData = {
						type: '',
						images: [],
						content: '',
						contactName: '',
						contactPhone: '',
						communityId: '',
					}

					// 跳转到历史记录
					setTimeout(() => {
						this.$router.smartNavigate({
							url: "/pages/mePages/WorkOrderDetails"
						})
					}, 1500)
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: "提交失败，请重试",
						icon: "error",
					});
				})
			},
			uploadImages(res) {
				const tempFilePaths = res.tempFilePaths;
				if (tempFilePaths && tempFilePaths.length > 0) {
					uni.showLoading({
						title: '上传中...',
						mask: true
					});

					const token = storage.getAccessToken();
					let uploadedCount = 0;

					tempFilePaths.forEach((filePath, index) => {
						uni.uploadFile({
							url: `${config.commonApi}/api/upload/wechat-image`,
							filePath: filePath,
							name: 'file',
							header: {
								'authorization': token
							},
							success: (uploadFileRes) => {
								uploadedCount++;
								let data = JSON.parse(uploadFileRes.data);
								let imageData = {
									url: data.data.url
								};
								this.formData.images.push(imageData);

								if (uploadedCount === tempFilePaths.length) {
									uni.hideLoading();
									uni.showToast({
										title: "图片上传成功",
										icon: "success",
									});
								}
							},
							fail: (err) => {
								uploadedCount++;
								if (uploadedCount === tempFilePaths.length) {
									uni.hideLoading();
									uni.showToast({
										title: "部分图片上传失败",
										icon: "error",
									});
								}
							}
						});
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.complaints-container {
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	// 头部样式
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		width: 100%;

		.header-left {
			.back-btn {
				width: 64rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
					background: rgba(255, 255, 255, 1);
				}

				.back-icon {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}
			}
		}

		.header-center {
			flex: 1;
			text-align: center;

			.page-title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.header-right {
			.header-actions {
				.action-text {
					font-size: 24rpx;
					color: #666;
					background: rgba(255, 255, 255, 0.8);
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	// 主要内容区域
	.main-content {
		padding: 32rpx;
		padding-bottom: 160rpx;
	}

	// 表单卡片
	.form-card {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.card-header {
			padding: 32rpx 24rpx 24rpx;
			border-bottom: 1px solid #f0f0f0;

			.card-title {
				font-size: 32rpx;
				font-weight: 700;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}

			.card-subtitle {
				font-size: 24rpx;
				color: #666;
			}
		}

		.type-selector {
			padding: 24rpx;

			.custom-picker {
				.picker-content {
					background: #f8f9fa;
					border-radius: 12rpx;
					padding: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.picker-text {
						font-size: 28rpx;
						color: #333;
					}

					.picker-arrow {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}

		.content-input {
			padding: 24rpx;
			position: relative;

			.custom-textarea {
				background: #f8f9fa;
				border-radius: 12rpx;
				padding: 24rpx;
				min-height: 120rpx;
				font-size: 28rpx;
				color: #333;
				line-height: 1.5;
				width: 100%;
				box-sizing: border-box;
			}

			.char-count {
				position: absolute;
				bottom: 8rpx;
				right: 16rpx;

				.count-text {
					font-size: 20rpx;
					color: #999;
				}
			}
		}

		.image-upload {
			padding: 24rpx;

			.upload-container {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;

				.upload-item {
					position: relative;
					width: 160rpx;
					height: 160rpx;

					.uploaded-image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}

					.delete-btn {
						position: absolute;
						top: -8rpx;
						right: -8rpx;
						width: 32rpx;
						height: 32rpx;
						background: #ff4d4f;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						.delete-icon {
							color: white;
							font-size: 20rpx;
							font-weight: bold;
						}
					}
				}

				.upload-btn {
					width: 160rpx;
					height: 160rpx;
					background: #f8f9fa;
					border: 2rpx dashed #ddd;
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.upload-icon {
						font-size: 48rpx;
						color: #999;
						margin-bottom: 8rpx;
					}

					.upload-text {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}

		.contact-info {
			padding: 24rpx;

			.info-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 0;
				border-bottom: 1px solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.info-label {
					font-size: 28rpx;
					color: #666;
				}

				.info-value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}
	}

	// 底部操作按钮
	.bottom-actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 32rpx;
		background: white;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);

		.action-buttons {
			display: flex;
			gap: 24rpx;

			.history-btn {
				flex: 1;
				height: 80rpx;
				background: white;
				border: 2rpx solid #666;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;

				&:active {
					background: #f8f9fa;
					transform: translateY(2rpx);
				}

				.btn-text {
					font-size: 32rpx;
					color: #666;
					font-weight: 600;
				}
			}

			.submit-btn {
				flex: 2;
				background: linear-gradient(135deg, #FF6B35 0%, #FE6100 100%);
				border: none;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;

				&:active {
					transform: translateY(2rpx);
					background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
				}

				.btn-text {
					font-size: 32rpx;
					color: white;
					font-weight: 600;
				}
			}
		}
	}

	// 兼容旧样式
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.card_box {
		padding: 32rpx;

		.release_btn {
			margin-top: 32rpx;
		}
	}

	.tag_box {
		border-top: 1px solid #ccc;
		padding: 32rpx 0;
		margin: 0 32rpx;
	}

	.cu-item {
		margin: 0 !important;
	}

	.textarea_input {
		border-top: 1px solid #ccc;
		margin: 0 32rpx;
	}

	.example-body {
		padding: 24rpx;
	}

	.uni-easyinput__content-textarea {
		padding: 24rpx;
		padding-left: 0;
	}

	.tag_box,
	.pire_box {
		border-top: 1px solid #ccc;
		padding: 32rpx 0;
		margin: 0 32rpx;
	}

	.cu-item {
		margin: 0 !important;
	}
</style>